<template>
  <div class="toolmanage">
    <div class="flex row_bet">
      <div>
        <div class="card toolli" v-for="(v,k) in toollist" :key="k">
          <div class="flex row_bet col_center">
            <div class="flex row_bet col_center">
              <img :src="v.pic" alt="" style="width:375px;height:207px;margin-right: 35px;border-radius: 6px;">
              <div class="toolinfo">
                <div class="title">{{ v.title }}</div>
                <div class="time">
                  <a-space><span>更新时间:{{ v.title }}</span> <span>最新版本：{{ v.version }}</span></a-space>
                </div>
                <div class="line-6 desc">{{ v.desc }}</div>
                <div class="log">
                  <a-space>
                    <span>[{{ v.time | dateFormat('YYYY-MM-DD') }}]</span>
                    <span>更新日志:{{ v.log }}</span>
                    <span class="cursor" style="color: blue" @click="getloginfo(v.id)">查看更多</span>
                  </a-space>
                </div>
              </div>
            </div>
            <div class="downloadbox">
              <div>
                <a-button style="margin-bottom: 15px;">删除工具</a-button>
                <a-button style="margin-bottom: 15px;">编辑工具</a-button>
                <a-button @click="doupdate(v)">更新工具</a-button>
              </div>
              <a :href="v.download_url" download class="adown">
                <a-button>立即下载</a-button>
              </a>
            </div>
          </div>
        </div>
      </div>
      <div class="rightlog">
        <div class="top">添加工具</div>
        <div>
          <div class="title">
            <a-input placeholder="工具标题" v-model="title" style="width:256px;"/>
          </div>
          <div class="pic">
            <div v-if="pic!== ''">
              <img :src="pic" alt="" style="width: 256px;height: 147px">
            </div>
            <a-upload-dragger
              v-else
              name="file"
              :multiple="true"
              :showUploadList="false"
              action="https://app.letuilm.com/api/upload"
              @change="handleChange2"
              style="width: 256px;height: 147px"
            >
              <p class="ant-upload-drag-icon">
                <a-icon type="folder"/>
              </p>
              <p class="ant-upload-text">
                点击或拖拽上传工具图片
              </p>
            </a-upload-dragger>
          </div>
          <div class="desc">
            <a-textarea placeholder="输入工具介绍" :rows="10" v-model="desc"/>
          </div>
          <div class="abtn">
            <a-button type="primary" style="width:100%;" @click="doaddtooldata">确认添加</a-button>
          </div>
        </div>
      </div>
    </div>
    <a-drawer
      title="更新工具"
      :width="513"
      :visible="drawershow2"
      :body-style="{ paddingBottom: '80px' }"
      @close="onClose"
    >
      <div class="drawer1">
        <div class="titles">选择工具</div>
        <a-input v-model="form.tooltitle" disabled class="chooseipt br4"/>
        <div class="titles">最新版本</div>
        <a-input v-model="form.version" placeholder="输入最新版本号" class="chooseipt br4"/>
        <div class="titles">更新日志</div>
        <a-textarea v-model="form.log" placeholder="更新日志" :rows="10"/>
        <div class="titles">下载链接</div>
        <a-input v-model="form.url" placeholder="输入下载链接" class="chooseipt br4"/>
        <div
          :style="{
            position: 'absolute',
            right: 0,
            bottom: 0,
            width: '100%',
            borderTop: '1px solid #e9e9e9',
            padding: '10px 16px',
            background: '#fff',
            textAlign: 'right',
            zIndex: 1
          }"
        >
          <a-button type="primary" style="float:left;" :loading="btnloading" class="br4" @click="dosubmit">
            确 认 更 新
          </a-button>
        </div>
      </div>
    </a-drawer>
  </div>
</template>
<script>
  import { doaddtooldata, doupdatetooldata, getloginfo, gettoollist, gettooloverview } from '@/api/toolApi'

  export default {
    name: 'Toolmanage',
    data () {
      return {
        drawershow2: false,
        toollist: [
          // {
          //   id: 1, // 工具id
          //   title: '测试', // 工具标题
          //   pic: 'https://detail.tmall.com/item.htm?id=608455384750', // 工具图片
          //   desc: '测试介绍', // 工具简介
          //   time: '2020-12-23 10:33:37', // 更新时间
          //   version: '2.2', // 更新版本
          //   log: '测试更新日志', // 更新日志
          //   download_url: 'http://www.baidu.com' // 下载地址
          // }
        ],
        overviewlist: [],
        total: 0,
        current: 1,
        logList: [],
        title: '',
        pic: '',
        desc: '',
        btnloading: false,
        form: {
          tool_id: '',
          version: '',
          log: '',
          url: '',
          tooltitle: ''
        }
      }
    },
    computed: {},
    created () {
      this.gettoollist()
      this.gettooloverview(1, 17)
    },
    mounted () {

    },
    methods: {
      dosubmit () {
        if (this.form.tool_id !== '' &&
          this.form.version !== '' &&
          this.form.log !== '' &&
          this.form.url !== '') {
          doupdatetooldata(this.form).then(res => {
            console.log(res)
            if (res.code === 200) {
              this.$message.success('更新成功!')
              this.onClose()
            } else {
              this.$message.error(res.msg)
            }
          }).catch(err => {
            console.log(err)
          })
        } else {
          this.$message.info('请检查所填内容!')
        }
      },
      onClose () {
        this.form = {
          tool_id: '',
          version: '',
          log: '',
          url: '',
          tooltitle: ''
        }
        this.drawershow2 = false
      },
      doupdate (row) {
        console.log(row)
        this.form.tool_id = row.id
        this.form.tooltitle = row.title
        this.form.log = row.log
        this.form.version = row.version
        this.form.url = row.download_url
        this.drawershow2 = true
      },
      handleChange2 (info) {
        const status = info.file.status
        // fin_fileName
        if (status !== 'uploading') {
          console.log(info.file, info.fileList)
          this.pic = '//' + info.file.response.data.url
        }
        if (status === 'done') {
          this.$message.success(`${info.file.name} 上传成功!`)
        } else if (status === 'error') {
          this.$message.error(`${info.file.name} 上传失败!`)
        }
      },
      doaddtooldata () {
        doaddtooldata({
          title: this.title,
          pic: this.pic,
          desc: this.desc
        }).then(res => {
          console.log(res)
          if (res.code === 200) {
            this.$message.success('发布成功!')
            this.title = ''
            this.pic = ''
            this.desc = ''
          } else {
            this.$message.error(res.msg)
          }
        }).catch(err => {
          console.log(err)
        })
      },
      getloginfo (id) {
        getloginfo({
          tool_id: id
        }).then(res => {
          console.log(res)
          this.logList = res.data
          this.timelineshow = true
        }).catch(err => {
          console.log(err)
        })
      },
      pagesizechange (page, pagesize) {
        console.log(page, pagesize)
        this.gettooloverview(page, 17)
      },
      gettooloverview (page, pagesize) {
        gettooloverview({
          page: page,
          pagesize: pagesize
        }).then(res => {
          console.log(res)
          this.overviewlist = res.data.data
          this.total = res.data.count
          this.current = parseInt(res.data.page)
        }).catch(err => {
          console.log(err)
        })
      },
      gettoollist () {
        gettoollist().then(res => {
          // console.log(res)
          this.toollist = res.data
        }).catch(err => {
          console.log(err)
        })
      }
    }
  }
</script>
<style lang='less' scoped>
  .toolmanage {
    /deep/ .ant-input {
      border-radius: 4px;
    }

    /deep/ .ant-btn {
      border-radius: 4px;
    }

    .toolli {
      width: 1313px;
      height: 251px;
      padding: 22px;
      margin-bottom: 18px;
      border-radius: 6px;

      .toolinfo {
        width: 398px;
        color: #101010;

        .title {
          font-size: 20px;
        }

        .time {
          font-size: 12px;
        }

        .desc {
          color: #BBBBBB;
          font-size: 13px;
          height: 121px;
        }

        .log {

        }
      }

      .downloadbox {
        width: 100px;
        height: 207px;
        text-align: center;
        display: flex;
        flex-wrap: wrap;

        .adown {
          height: 32px;
          display: block;
          margin: 0 auto;
          margin-top: 47px;
          /*position: absolute;*/
          /*bottom: 0;*/
        }
      }
    }

    .rightlog {
      width: 305px;
      height: 100%;
      background-color: #fff;
      padding: 11px;
      border-radius: 6px;
      position: sticky;
      top: 0px;
      text-align: center;

      .top {
        margin-bottom: 15px;
        text-align: left;
        float: left;
        margin-left: 13px;
      }

      .title {
        margin-bottom: 17px;
      }

      .pic {
        text-align: center;
        margin: 0 auto;
        margin-bottom: 17px;
      }

      .desc {
        width: 256px;
        margin: 0 auto;
        margin-bottom: 17px;
      }

      .abtn {
        width: 256px;
        margin: 0 auto;
      }
    }

  }
</style>
